<template>
  <div>
    <el-menu
      class="el-menu-demo"
      mode="horizontal"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
      <el-menu-item><i class="el-icon-s-home"></i>订单管理</el-menu-item>
      <!-- <el-menu-item index="/salesMenSystem/xcustomers/xAddCustomers"><i class="el-icon-user"></i>新增客户</el-menu-item> -->
      <el-menu-item style="color:#009688 "
        ><i class="el-icon-s-operation"></i>退保申请</el-menu-item
      >
    </el-menu>
    <!--  -->
    <!-- <h5>{{oneOrdersData}}</h5> -->
    <h3 style="text-align:left">订单信息:</h3>
    <div class="companyContent">
      <!--  -->
      <el-table :data="oneOrdersData" stripe border style="width: 100%">
        <el-table-column fixed prop="_id" label="_id" width="250">
        </el-table-column>
        <el-table-column prop="flowNum" label="订单流水" width="150">
        </el-table-column>
        <el-table-column
          prop="customersId.name"
          label="客户姓名"
          width="150"
        >
        </el-table-column>
        <el-table-column
          prop="customersId.age"
          label="客户年龄"
          width="120"
        >
        </el-table-column>
        <el-table-column
          prop="productsId.classesId.classes"
          label="保险类别"
          width="120"
        >
        </el-table-column>
        <el-table-column
          prop="productsId.name"
          label="产品"
          width="120"
        >
        </el-table-column>
        <el-table-column prop="productsId.price" label="价格" width="120">
        </el-table-column>
        <el-table-column label="订单状态" width="120">
          <template slot-scope="scope">
            <span v-if="scope.row.state == 1">未支付</span>
            <span v-if="scope.row.state == 2">已支付</span>
            <span v-if="scope.row.state == 3">待支付</span>
          </template>
        </el-table-column>
        <el-table-column prop="dealTime" label="提交时间" width="120">
        </el-table-column>
        <el-table-column prop="saleMenId.name" label="所属销售" width="120">
        </el-table-column>
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              style="color:#009688;"
              @click="lookOrders(scope.row._id)"
              >查看详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!--  -->
    </div>
    <!--  -->
    <h3 style="text-align:left">退保原因:</h3>

    <el-checkbox-group v-model="reasonOutOrders" style="text-align:left;">
      <template v-for="item in checkboxData">
        <el-checkbox
          :label="item"
          border
          style="width:180px;line-height:20px"
          :key="item"
        ></el-checkbox>
      </template>
      <h3>附属备注:</h3>
      <el-input
        type="textarea"
        style="width:300px;height:60px"
        :rows="4"
        placeholder="请输入内容"
        v-model="otherText"
      >
      </el-input>
    </el-checkbox-group>

    <el-button
      type="primary"
      @click="btnOutOrders"
      style="backgroundColor:#009688;width:190px;"
      >立即申请退保</el-button
    >
  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapState, mapMutations, mapActions } = createNamespacedHelpers(
  "orders"
);
export default {
  data() {
    return {
      reasonOutOrders: [], // 退保原因
      checkboxData: [
        "暂时不想买了",
        "发票问题",
        "商品质量问题",
        "服务不周",
        "无理由退保",
        "客户执意退保",
        "其他",
      ],
      otherText: "",
    };
  },
  mounted() {
    // //  this.getOrdersByOrdersId({_id:localStorage.oneOrdersId});  // 所点击的订单id传过去
    this.getOrdersByOrdersId({ _id: localStorage.oneOrdersId }); // 所点击的订单id传过去
  },
  computed: {
    ...mapState(["oneOrdersData"]),
  },
  methods: {
    ...mapActions(["getOrdersByOrdersId", "applyOutOrders",'oneModifyOrders']),
    lookOrders(_id) {
      // 传送该订单的id
      // console.log({_id});
      this.getOrdersByOrdersId({ _id });
      // 获取个人订单详情
      this.$router.push("/salesMenSystem/xOrders/xOneOrdersDetails");
    },

    btnOutOrders() {
      // 退保原因，附属备注，退保的订单id
      //  console.log(this.reasonOutOrders,this.otherText,localStorage.oneOrdersId);
      if (this.reasonOutOrders.length > 0 && this.otherText != "") {
        // 到退保数据库
        this.applyOutOrders({
          reasonOutOrders: this.reasonOutOrders,
          otherText: this.otherText,
          oneOrdersId: localStorage.oneOrdersId,
          'saleMenId': localStorage.userInforId,
          outOrdersState: 1, // 审核中
        });
       this.oneModifyOrders(1);
           this.$router.push('/salesMenSystem/xOrders/xOutOrdersList')
      }
    },
  },
};
</script>

<style></style>
